<template>
  <div class="app-container">
    <el-button type="primary" icon="el-icon-add" size="mini" style="margin-bottom:10px" @click="add(false)">添加分类</el-button>
    <tree-table
      class="treeTable"
      :data="catelist"
      :columns="columns"
      :selection-type="false"
      :expand-type="false"
      :show-index="false"
      index-text="#"
      border
      :show-row-hover="false"
    >
      <!-- 是否有效 -->
      <template v-slot:isok="scope">
        <i v-if="scope.row.cat_deleted===false" class="el-icon-success" style="color:lightgreen" />
        <i v-else class="el-icon-error" style="color:red" />
      </template>
      <!-- 排序 -->
      <template v-slot:level="scope">
        <el-tag size="mini" scope-row-level>{{ scope.row.Level }} 级</el-tag>
      </template>
      <!-- 操作 -->
      <template v-slot:opt="scope">
        <el-button type="primary" icon="el-icon-add" size="mini" @click="add(scope.row)">添加子类</el-button>
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)">编辑</el-button>
        <el-button type="warning" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
      </template>
    </tree-table>

    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-input v-model="form.pid" style="display:none" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑分类" :visible.sync="dialogEditFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-input v-model="form.pid" style="display:none" />
        <el-input v-model="form.id" style="display:none" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
// npm i vue-table-with-tree-grid -S
import TreeTable from 'vue-table-with-tree-grid'
import { getCategory, add, edit, del } from '@/api/articleCategory'

export default {
  name: 'ArticleCategory',
  components: {
    TreeTable
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogEditFormVisible: false,
      form: {
        id: 0,
        name: '',
        pid: 0
      },
      catelist: [],
      columns: [{
        label: '分类名称',
        prop: 'label'

      },
      { label: '分类等级', prop: 'Level', type: 'template', template: 'level' },
      {
        label: '操作',
        type: 'template',
        template: 'opt'
      }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getCategory().then(response => {
        this.catelist = response.data
      })
    },
    add(row) {
      this.dialogFormVisible = true
      if (row) {
        this.form.pid = row.id
      }
      console.log(row)
    },
    edit(row) {
      this.dialogEditFormVisible = true
      this.form.id = row.id
      this.form.pid = row.parentID
      this.form.name = row.label
      console.log(row)
    },
    addSubmit() {
      const params = {
        pid: this.form.pid,
        name: this.form.name
      }
      console.log(params)
      add(params).then(response => {
        if (response.code === 0) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
          this.reload()
        } else {
          console.log(response.message)
          this.$notify.error({
            title: '错误',
            message: response.message,
            duration: 2000
          })
        }
      })
    },
    editSubmit() {
      const params = {
        id: this.form.id,
        pid: this.form.pid,
        name: this.form.name
      }
      console.log(params)
      edit(params).then(response => {
        if (response.code === 0) {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
          this.reload()
        } else {
          console.log(response.message)
          this.$notify.error({
            title: '错误',
            message: response.message,
            duration: 2000
          })
        }
      })
    },
    del(id) {
      this.$confirm('确认删除？')
        .then(_ => {
          del(id).then(response => {
            if (response.code === 0) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.reload()
            } else {
              console.log(response.message)
              this.$notify.error({
                title: '错误',
                message: response.message,
                duration: 2000
              })
            }
          })
        })
        .catch(_ => {})
    },
    reload() {
      location.reload()
      // const path = '/article/category/'
      // this.$router.push({
      //   path,
      //   query: {
      //     t: +new Date()
      //   }
      // })
    }

  }
}

</script>

